<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    {# font-awesome #}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}">

    {# boostrap css #}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">

    {# 自定义css #}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/index.css') }}">

    {# jquery js #}
    <script src="{{ url_for('static',filename='js/jquery-3.6.3.min.js') }}"></script>

    {# bootstrap popper js #}
    <script src="{{ url_for('static',filename='js/popper.min.js') }}"></script>

    {# bootstrap js #}
    <script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>

    <!-- bootstrap pager -->
    <script src="{{ url_for('static',filename='js/bootstrap-pager.js') }}"></script>

    <!-- echarts -->
    <script src="{{ url_for('static',filename='js/echarts/echarts-5.0.1.min.js') }}"></script>

    {# 自定义 js #}
    <script src="{{ url_for('static',filename='js/index.js') }}"></script>

    <style>
        body {
            font-family: Arial, msg_content sans-serif;
            margin: 0;
            font-size: 14px;
        }


        .my_msg {
            position: fixed;
            top: 60px;
            right: 8px;
            z-index: 9999;
            min-width: 200px;
            opacity: 0.9;
        }

    </style>
</head>
<body>

{# 全局js 控制显示的消息 #}
<div id="msg_block">
{#    <div class="alert alert-success fade alert-dismissible my_msg" role="alert" id="my_js_alert">#}
{#        <span id="msg_content">default</span>#}
{#        <button type="button" class="close" data-dismiss="alert" aria-label="Close">#}
{#            <span aria-hidden="true">&times;</span>#}
{#        </button>#}
{#    </div>#}
</div>

{# flask flash 控制显示的消息 #}
{% for category,message in get_flashed_messages(with_categories=true) %}

    <div class="alert alert-{{ category }} alert-dismissible fade show my_msg" role="alert">
        <span>{{ message }}</span>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

{% endfor %}

{#导航栏#}
{% block navbar %}

{% endblock %}

{#主体#}
<div style="padding: 20px;margin-top: 60px">
    {% block content %}

    {% endblock %}
</div>

<script>
    function delMsg() {
        let now = document.getElementById('flash');
        let parent = now.parentElement;

        // 删除
        parent.removeChild(now);
    }

</script>

</body>
</html>